<template>
    <view class="content">
        <view class="mix-tree-list">
            <block v-for="(item, index) in treeList" :key="index">
                <view 
                    class="mix-tree-item"
                    :style="[{
                            paddingLeft: item.rank*15 + 'px',
                            zIndex: item.rank*-1 +50
                        }]"
                    :class="{
                            border: treeParams.border === true,
                            show: item.show,
                            last: item.lastRank,
                            showchild: item.showChild
                        }"
                    @click.stop="treeItemTap(item, index)"
                >
                    <image class="mix-tree-icon" :src="item.lastRank ? treeParams.lastIcon : item.showChild ? treeParams.currentIcon : treeParams.defaultIcon"></image>
                    {{item.department_name}}
                    
                    <!-- 新增选中当前项的功能 -->
                    <!-- <view @click.stop="currentItemTap(item, index)">{{item.department_name}}</view> -->
                    <view style="width: 60upx;text-align: center;margin-left: 5upx;" @click.stop="currentItemTap(item, index)">
                        <image class="mix-tree-icon" src="/static/mix-tree/currentNote.jpeg"></image>
                    </view>     
                    
                </view>
            </block>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            list: {
                type: Array,
                default(){
                    return [];
                }
            },
            params: {
                type: Object,
                default(){
                    return {}
                }
            }
        },
        data() {
            return {
                treeList: [],
                treeParams: {
                    defaultIcon: '/static/mix-tree/defaultIcon.jpeg',
                    currentIcon: '/static/mix-tree/currentIcon.jpeg',
                    lastIcon: '',
                    border: false
                }
            }
        },
        watch: {
            list(list){
                this.treeParams = Object.assign(this.treeParams, this.params);
                // console.log(this.treeParams, this.params);
                this.renderTreeList(list);
            }
        },
        onLoad() {  
            console.log("mix-tree-dep onLoad")
        }, 
        methods: {
            //扁平化树结构
            renderTreeList(list=[], rank=0, parentId=[]){
                //liy:若无该if代码块的判断与处理，网络数据每刷新一次一级目录就会重复一次
                if(rank == 0) {
                    this.treeList = [];
                }
                list.forEach(item=>{
                    this.treeList.push({
                        department_id: item.department_id,
                        department_name: item.department_name,
                        parentId,  // 父级id数组
                        rank,  // 层级
                        showChild: false,  //子级是否显示（liy：默认所有子级都不显示）
                        show: rank === 0  // 自身是否显示
                    })
                    if(Array.isArray(item.children) && item.children.length > 0){
                        let parents = [...parentId];
                        parents.push(item.department_id);
                        this.renderTreeList(item.children, rank+1, parents);
                    }else{
                        this.treeList[this.treeList.length-1].lastRank = true;
                    }
                });
    
                //liy:实现默认展开所有子级
                this.treeList.forEach(childItem=>{
                    childItem.show = true;
                    //解决第一次点击条目不会收缩子项的问题(默认所有子级都不显示，所有这里要重新赋值),或者showChild默认值该为true即可
                    if(childItem.rank != 0){
                        this.treeList[childItem.rank -1].showChild = true;
                    }
                });

            },
            // 点击
            treeItemTap(item){
                let list = this.treeList;
                let id = item.department_id;
                if(item.lastRank === true){
                    //点击最后一级时触发事件
                    this.$emit('treeItemClick', item);
                    return;
                }
                item.showChild = !item.showChild;
                list.forEach(childItem=>{
                    if(item.showChild === false){
                        //隐藏所有子级
                        if(!childItem.parentId.includes(id)){
                            return;
                        }
                        if(childItem.lastRank !== true){
                            childItem.showChild = false;
                        }
                        childItem.show = false;
                    }else{
                        if(childItem.parentId[childItem.parentId.length-1] === id){
                            childItem.show = true;
                        }
                    }
                })
            },
            // 实现选中中间item项
            currentItemTap(item){
                let list = this.treeList;
                let id = item.department_id;
                console.log("currentItemTap:" + id);
                this.$emit('treeItemClick', item);
                return;
            }
        }
    }
</script>

<style>
    .mix-tree-list{
        display: flex;
        flex-direction: column;
        padding-left: 30upx;
    }
    .mix-tree-item{
        display: flex;
        align-items: center;
        font-size: 30upx;
        color: #333;
        height: 0;
        opacity: 0;
        transition: .2s;
        position: relative;
    }
    .mix-tree-item.border{
        border-bottom: 1px solid #eee;
    }
    .mix-tree-item.show{
        height: 80upx;
        opacity: 1;
    }
    .mix-tree-icon{
        width: 26upx;
        height: 26upx;
        margin-right: 8upx;
        opacity: .9;
    }
    
    .mix-tree-item.showchild:before{
        transform: rotate(90deg);
    }
    .mix-tree-item.last:before{
        opacity: 0;
    }
</style>